<template>
    <div class='right'>
        <div class="top">
            <Title>群众反应热词</Title>
            <div id="myEchart" style="height: 306px;"></div>
        </div>
        <div class="bottom">
            <Title isSelect="yes" @dialogFn="dialogFn">民呼我为</Title>
            <div class="tab">
                <div class="list active" @click="tabFn(1)">承办单位</div>
                <div class="list" @click="tabFn(2)">承办单位</div>
                <div class="list" @click="tabFn(3)">承办单位</div>
            </div>
            <div class="head">
                <span v-for="item in headList[currentIndex - 1]">{{ item }}</span>
            </div>
            <div class="body1" @mouseenter="mouseEnterFn" @mouseleave="mouseLeaveFn">
                <div class="body2">
                    <div v-for="item in listData">
                        <span style="color: rgba(255, 255, 255, 1);">{{ item.name }}</span>
                        <span style="color: rgba(180, 204, 224, 1);">{{ item.name }}</span>
                        <span style="color: rgba(77, 193, 247, 1);">{{ item.name }}</span>
                        <span style="color: rgba(255, 208, 66, 1);">{{ item.name }}</span>
                        <span v-show="currentIndex === 3" style="color: rgba(255, 208, 66, 1);">{{ item.name }}</span>
                    </div>
                </div>
                <div class="body3 body2"></div>
            </div>

            <el-dialog title="民呼我为" :visible.sync="dialogVisible" width="1500px">
                <div class="dialog_box">
                    <div class="post_dialog_tab">
                        <div :class="{'item':true, 'active':currentIndex == 1 ? true : false}" @click="tabFn(1)">承办单位</div>
                        <div :class="{'item':true, 'active':currentIndex == 2 ? true : false}" class="item" @click="tabFn(2)">镇街人大</div>
                        <div :class="{'item':true, 'active':currentIndex == 3 ? true : false}" class="item" @click="tabFn(3)">代表参与</div>
                    </div>
                    <div class="post_dialog_box">
                        <div class="post_dialog_box1" v-show="currentIndex === 1">
                            <div class="item">
                                <div class="item_number">
                                    <p>反应问题</p>
                                    <p>9999</p>
                                </div>
                                <img src="@/assets/images/dialog/Group 5932 (0).svg" alt="" srcset="">
                            </div>
                            <div class="item">
                                <div class="item_number">
                                    <p>已办结</p>
                                    <p>9999</p>
                                </div>
                                <img src="@/assets/images/dialog/Group 5932 (1).svg" alt="" srcset="">
                            </div>
                            <div class="item">
                                <div class="item_number">
                                    <p>代表处理</p>
                                    <p>9999</p>
                                </div>
                                <img src="@/assets/images/dialog/Group 5932 (2).svg" alt="" srcset="">
                            </div>
                            <div class="item">
                                <div class="item_number">
                                    <p>群众满意</p>
                                    <p>9999</p>
                                </div>
                                <img src="@/assets/images/dialog/Group 5932 (3).svg" alt="" srcset="">
                            </div>
                        </div>
                        <div class="post_dialog_box2" v-show="currentIndex === 2">2</div>
                        <div class="post_dialog_box3" v-show="currentIndex === 3">
                            <div class="item1">
                                按时处理率
                                <span>123</span>
                            </div>
                            <div class="item2">
                                群众满意率
                                <span>123</span>

                            </div>
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
import Title from '@/components/template/title.vue'
import * as echarts from 'echarts';
import 'echarts-wordcloud';
export default {
    data() {
        return {
            dialogVisible: false,
            keywords: [
                { "name": "男神", "value": 2.64 },
                { "name": "好身材", "value": 4.03 },
                { "name": "校草", "value": 24.95 },
                { "name": "酷", "value": 4.04 },
                { "name": "时尚", "value": 5.27 },
                { "name": "阳光活力", "value": 5.80 },
                { "name": "初恋", "value": 3.09 },
                { "name": "英俊潇洒", "value": 24.71 },
                { "name": "霸气", "value": 6.33 },
                { "name": "腼腆", "value": 2.55 },
                { "name": "蠢萌", "value": 3.88 },
                { "name": "青春", "value": 8.04 },
                { "name": "网红", "value": 5.87 },
                { "name": "萌", "value": 6.97 },
                { "name": "认真", "value": 2.53 },
                { "name": "古典", "value": 2.49 },
                { "name": "温柔", "value": 3.91 },
                { "name": "有个性", "value": 3.25 },
                { "name": "可爱", "value": 9.93 },
                { "name": "幽默诙谐", "value": 3.65 }],
            currentIndex: 1,
            headList: [
                ['承办单位', '办结率', '按时答复率', '群众满意率'],
                ['代表之家', '代表参与率', '暗示处理率', '群众满意率'],
                ['代表', '所属镇街', '建议总数', '按时处理', '群众满意率'],
            ],
            timer: null,
            listData: [
                { name: '1', a: 12, b: 23, c: 45, d: 123 },
                { name: '2', a: 12, b: 23, c: 45 },
                { name: '3', a: 12, b: 23, c: 45 },
                { name: '4', a: 12, b: 23, c: 45 },
                { name: '5', a: 12, b: 23, c: 45 },
                { name: '6', a: 12, b: 23, c: 45 },
                { name: '7', a: 12, b: 23, c: 45 },
                { name: '8', a: 12, b: 23, c: 45 },
                { name: '9', a: 12, b: 23, c: 45 },
                { name: '10', a: 12, b: 23, c: 45 },
                { name: '10', a: 12, b: 23, c: 45 },
                { name: '10', a: 12, b: 23, c: 45 },
            ]
        }
    },
    components: {
        Title
    },
    mounted() {
        this.initEchart()
        this.moveInit()
    },
    methods: {
        dialogFn() {
            this.dialogVisible = true
        },
        // 上 词云
        initEchart() {
            var myChart = echarts.init(document.getElementById('myEchart'));

            let option = {
                // color: ['yellow', '#00eff6', '#0098ff', '#ff4f78'],
                series: [{
                    type: 'wordCloud',
                    sizeRange: [18, 32],
                    rotationRange: [0, 0],
                    rotationStep: 45,
                    gridSize: 40,
                    shape: 'pentagon',
                    width: '100%',
                    height: '100%',
                    textStyle: {
                        fontFamily: '微软雅黑',
                        // fontWeight: 'bold',
                        color: function () {
                            // Random color
                            // return 'rgb(' + [
                            //     Math.round(Math.random() * 150),
                            //     Math.round(Math.random() * 240),
                            //     Math.round(Math.random() * 200)
                            // ].join(',') + ')';
                            let arr = ['rgb(70, 218, 219)', 'rgb(117, 151, 169)', 'rgb(190, 229, 251)', 'rgb(50, 84, 221)', 'rgb(255, 255, 255)', 'rbg(35, 64, 79)', 'rgb(53, 91, 109)', 'rgb(28, 64, 104)']
                            return arr[Math.floor(Math.random() * 9)];
                        }
                    },
                    data: this.keywords
                }]
            }
            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option);

            window.addEventListener("resize", function () {
                myChart.resize();
            });

        },
        // 下 列表切换
        tabFn(index) {
            // console.log(index);
            this.currentIndex = index
        },
        // 下 列表展示
        moveInit() {
            this.$nextTick(() => {
                this.clearTime()
                this.moveFn()
            })
        },

        moveFn() {
            let box1, box2, box3;
            box1 = document.querySelector(".body1");
            box2 = document.querySelector(".body2");
            box3 = document.querySelector(".body3");
            if (this.listData.length >= 12) {
                box3.innerHTML = box2.innerHTML;
            } else {
                box3.innerHTML = '';
            }
            this.timer = setInterval(() => {
                // if (box3.offsetTop - box1.scrollTop <= 0) {
                if (box2.scrollHeight - box1.scrollTop <= 0) {
                    // console.log(box1.scrollTop , box2.offsetHeight);
                    box1.scrollTop -= box2.offsetHeight;
                }
                else {
                    box1.scrollTop++;//demo向上滚动一个像素
                }
            }, 50);
        },

        mouseEnterFn() {
            this.clearTime()
        },
        mouseLeaveFn() {
            this.moveInit()
        },
        clearTime() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        }
    }

}

</script>
<style scoped lang='scss'>
.right {
    .top {
        height: 354px;
    }

    .bottom {
        margin-top: 20px;
        height: 580px;

        .tab {
            height: 38px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 18px 0;

            .list {
                width: 152px;
                height: 38px;
                border-radius: 6px;
                background: rgba(21, 57, 74, 1);
                font-size: 20px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 38px;
                color: rgba(123, 155, 179, 1);
                text-align: center;
                cursor: pointer;
            }

            .active {
                color: rgba(255, 255, 255, 1);

                --bg: linear-gradient(90deg, rgba(33, 124, 171, 1) 0%, rgba(10, 84, 143, 1) 100%);
                --border: linear-gradient(90deg, rgba(179, 230, 255, 1) 0%, rgba(71, 137, 183, 1) 100%);
                border: 1px solid transparent;
                /* var(--bg)背景色  var(--border)边框色 */
                background-image: var(--bg), var(--border);
                background-origin: border-box;
                background-clip: content-box, border-box;
            }

        }

        .head {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin-bottom: 10px;

            span {
                height: 34px;
                width: 90px;
                height: 24px;
                font-size: 18px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(153, 179, 200, 1);
                text-align: center;
                vertical-align: top;
            }
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .body1 {


            overflow: hidden;
            overflow-y: scroll;
            height: 420px;

            .body2 {
                div {
                    height: 38px;
                    // border: 1px solid red;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;

                    span {
                        width: 90px;
                        display: inline-block;
                        // border: 1px solid red;
                        text-align: center;
                        line-height: 38px;
                    }
                }

                div:nth-child(odd) {
                    background: linear-gradient(90deg, rgba(123, 201, 237, 0.05) 0%, rgba(123, 201, 237, 0.05) 50%, rgba(123, 201, 237, 0.05) 100%);

                }
            }
        }
    }
}

.post_dialog_tab {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;

    .item {
        margin-right: 20px;
        width: 186px;
        height: 56px;
        background: url('@/assets/images/dialog/label_bg01.svg') no-repeat;
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 56px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: top;
        cursor: pointer;
    }

    .active {
        background: url('@/assets/images/dialog/label_bg02.svg') no-repeat;
    }
}

.post_dialog_box {
    height: 670px;
    border: 1px solid rgba(16, 104, 148, 1);
    padding: 30px 20px;
    box-sizing: border-box;

    .post_dialog_box1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .item {
            width: 336px;
            height: 110px;
            background: url('@/assets/images/dialog/number_bg.svg') no-repeat;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-left: 40px;
            padding-right: 20px;
            box-sizing: border-box;

            .item_number {

                p:first-child {
                    font-size: 18px;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    margin-bottom: 5px;
                }

                p:last-child {
                    font-size: 28px;
                    font-weight: 700;
                    color: rgba(89, 247, 255, 1);
                }
            }

            img {
                display: block;
                width: 64px;
                height: 64px;
            }

        }
    }

    .post_dialog_box3 {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .item1,
        .item2 {
            width: 332px;
            height: 66px;
            margin: 0 30px;

            font-size: 20px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 27.44px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
            vertical-align: top;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            span{
                margin-right: 38px;
                margin-left: 38px;
            }
        }

        .item1 {
            background: url('@/assets/images/dialog/chuli.svg') no-repeat;

            span {
                font-size: 28px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 36.96px;
                color: rgba(255, 211, 8, 1);
                text-align: left;
                vertical-align: top;
            }
        }

        .item2 {
            background: url('@/assets/images/dialog/manyi.svg') no-repeat;

            span {
                font-size: 28px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 36.96px;
                color: rgba(24, 232, 255, 1);
                text-align: left;
                vertical-align: top;
            }
        }
    }
}
</style>